<template>
  <div class="box">
    <h1>{{ title }}</h1>
    <p>
      <a-input-search
        v-model:value="me"
        placeholder="输入用户名"
        @search="loginMe"
      >
        <template #enterButton>
          <a-button>登录</a-button>
        </template>
      </a-input-search>
    </p>
    <p>
      <a-input-search
        v-model:value="other"
        placeholder="输入用户名"
        @search="callOther"
      >
        <template #enterButton>
          <a-button>连接</a-button>
        </template>
      </a-input-search>
    </p>
    <p class="bg">
      <video ref="localStream" autoplay muted></video>
    </p>
    <a-row :gutter="[16, 16]">
      <a-col :span="12" v-for="(other, i) in users" :key="i">
        <div class="li">
          <span>{{ other }}</span>
          <video :ref="(el) => (audioDomList[i] = el)" autoplay muted></video>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  getCurrentInstance,
  ref,
  nextTick,
  onMounted,
  onBeforeUnmount,
} from "vue";
import { message } from "ant-design-vue";
import StreamRTC from "./MyWebRTC/StreamRTC";

export default {
  name: "HelloWorld",
  props: {
    title: String,
  },
  setup() {
    const me = ref("");
    const other = ref("");
    const users = ref([]);
    const localStream = ref(null);
    const audioDomList = ref([]);

    const { proxy } = getCurrentInstance();

    let rtc = null;
    onMounted(() => {
      rtc = new StreamRTC(
        `${proxy.$wsUrl}`,
        // 流回调
        (name, myStream) => {
          let video = null;
          if (name === me.value) {
            video = localStream.value;
            video.srcObject = myStream;
          } else {
            console.log(`${name}向你发起视频通话`);
            let index = users.value.indexOf(name);
            if (index < 0) {
              // 建立通信的其它人加入集合
              users.value.push(name);
              index = users.value.length;
            }
            nextTick(() => {
              video = audioDomList.value[index];
              if (video) {
                if ("srcObject" in video) {
                  video.srcObject = myStream;
                } else {
                  video.src = window.URL.createObjectURL(myStream);
                }
              }
            });
          }
        }
      );
    });

    onBeforeUnmount(() => {
      if (rtc) {
        rtc.dispose();
      }
    });

    // 用户登录
    const loginMe = () => {
      if (!me.value) {
        message.warn("请输入登录名");
        return;
      }
      if (rtc) {
        // 发送登录信息给服务器
        rtc.join(me.value);
      }
    };

    // 呼叫他人
    const callOther = () => {
      if (!other.value) {
        message.warn("请输入呼叫对象");
        return;
      }
      if (rtc) {
        rtc.offer(other.value);
      }
    };

    return {
      me,
      other,
      users,
      localStream,
      audioDomList,
      loginMe,
      callOther,
    };
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 500px;
  margin-left: auto;
  margin-right: auto;

  .bg {
    background-color: #242731;
    width: 100%;

    video {
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: fill;
      background: none;
      border: 0;
    }
  }

  .li {
    width: 100%;
    height: auto;
    position: relative;

    span {
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
    }

    video {
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: fill;
      background: none;
      border: 0;
    }
  }
}
</style>
